<template>
  <!-- 工作台-单 -->
  <div class="page100">
    <div class="leftPart flex_1 flex_column">
      <div class="top">
        <corner-card>
          <div slot="head">
            <div class="title">常用应用</div>
          </div>
          <div slot="content">
            <div class="commonUse flex_align">
              <div class="card" :style="{background:item.bg}" v-for="(item,index) in Tablist" :key="'tab'+index" @click="onSelect(item.url)">
                <img class="cardImg" :src="item.icon" />
                <div class="text">{{ item.name }}</div>
              </div>
            </div>
          </div>
        </corner-card>
      </div>

      <div class="todo flex_1 scrolly">
        <corner-card>
          <div slot="head" class="todo_center_head">
            <div :class="'txt_tab' + (activeIndex === 1 ? ' active' : '')" @click="onTabChange(1)">
              <el-badge :max="99" :value="waitTotal > 0 ? waitTotal : ''">
                <span>待办</span>
              </el-badge>
            </div>
            <div :class="'txt_tab' + (activeIndex === 2 ? ' active' : '')" @click="onTabChange(2)">
              已办
            </div>
          </div>
          <div slot="content" :class="{'flex_center':waitArray.length==0}">
            <div v-loading="loadingWait" v-if="waitArray.length > 0 && (activeIndex === 1 || activeIndex === 2)" class="todo_center_content flex_between flexW">
              <!-- @click="doAudit(item)" -->
              <div class="todo_item" v-for="(item, index) in waitArray" :key="index">
                <div class="flex_align mb19">
                  <div class="name flex_1">{{ item.title }}</div>
                  <div class="btn" :class="{'green':activeIndex==2}" @click="doAudit(item)">{{activeIndex === 1?'处理':'查看' }}</div>
                </div>
                <div class="flex_between">
                  <div class="name2">{{ item.moduleName }}</div>
                  <div class="flex_align">
                    <div class="name2 mr31">{{ item.userName }}</div>
                    <div class="name2">{{ item.createTime }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="empty_content">
              <img class="emptyImg" src="@/assets/images/homePage/no-img.png" alt="待办缺省" />
              <div class="tipTitle">暂无待办</div>
            </div>
          </div>
        </corner-card>
      </div>
    </div>
    <!-- 右边部分 -->
    <div class="rightPart flex_column">
      <div class="weather flex_column">
        <div class="top">
          <div class="box">
            <div class="f78">{{weatherStr.temp}}</div>
            <div class="airtemp">{{weatherStr.dayWeather}}</div>
          </div>
          <div class="text">{{weatherStr.nightTemp}}/{{weatherStr.dayTemp}}</div>
        </div>
        <div class="flex_align foot">
          <div class="time">{{ time }}</div>
          <div class="addText">
            <div>{{ city }}</div>
            <div>{{ nowDay }}</div>
          </div>
        </div>
      </div>
      <div class="flex_1">
        <corner-card>
          <div slot="head">
            <div class="title">日历</div>
          </div>
          <div slot="content" style="height: 100%">
            <div class="WholeScroll" style="overflow-y: auto;height: calc(100% - 10px);">
              <div class="calendarBox">
                <Calendar ref="Calendar" v-on:choseDay="clickDay" v-on:changeMonth="changeDate" :markDateMore="arr" :textTop="textTop" v-on:dbchoseDay="dbclickDay"></Calendar>
                <div class="todo WholeScroll">
                  <template v-if="dateMemoArray.length>0">
                    <div style="cursor: pointer" class="todoitem" v-for="(item,index) in dateMemoArray" :key="index">
                      <div class="left">{{item.ShortstartTime}}-{{item.ShortendTime}}</div>
                      <div class="right">
                        <div class="content">{{item.title}}</div>
                        <div class="time">{{item.bindDate}}</div>
                      </div>
                    </div>
                  </template>
                  <!-- <div v-if="dateMemoArray.length === 0" class="flex-center" style="height: 100%;width: 100%;">
                    <div class="addwork-btn" @click="addWork">
                      <i class="iconfont icon-icon_add"></i>
                    </div>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
        </corner-card>
      </div>
    </div>
    <!-- 质量检查 -->
    <qualityDetail :postDetail="postDetailData" @reloadList="onRoad('quality')"></qualityDetail>
    <!-- 监督检查详情 -->
    <supervisionDetail :postDetail="postDetailData1" @reloadList="onRoad('supervision')"></supervisionDetail>
    <!-- 安全整改 -->
    <safetyDetail :postDetail="postDetailData2" @reloadList="onRoad('safety')"></safetyDetail>
  </div>
</template>
<script>
import todo from '@/api/wf/todo'
import store from '@/store'
import CornerCard from './cornerCard.vue';
import AMap from 'AMap'
export default {
  components: {
    CornerCard,
    Calendar: require('../../../components/Calendar/calendar.vue').default,
    qualityDetail: require(`@/views/qualityCheck/qualityInspection/qualityInspection-detail.vue`).default,
    supervisionDetail: require(`@/views/qualityCheck/supervision/supervision-detail.vue`).default,
    safetyDetail: require(`@/views/supervisionCheck/securityCheck/safetyRectification/safetyRectification-detail`).default,
  },
  data() {
    return {
      timeP: null,
      nowDay: '',
      time: '',
      Tablist: [
        { name: '周进度', url: '/actual-progress/weekly-report', bg: '#F3F1FF', icon: require('@/assets/images/homePage/gzt6.png') },
        { name: '月进度', url: '/actual-progress/monthly-progress', bg: '#EFFCF6', icon: require('@/assets/images/homePage/gzt1.png') },
        { name: '质量检查', url: '/qualityCheck/qualityInspection', bg: '#FFFBF0', icon: require('@/assets/images/homePage/gzt2.png') },
        { name: '安全整改', url: '/securityCheck/safetyRectification', bg: '#FEEFF7', icon: require('@/assets/images/homePage/gzt5.png') },
        { name: '视频监控', url: '/video/real-time-preview', bg: '#EEF7FF', icon: require('@/assets/images/homePage/gzt3.png') },
        { name: '人员档案', url: '/contract/personnel-archives', bg: '#EDFDFD', icon: require('@/assets/images/homePage/gzt4.png') },
      ],
      activeIndex: 1,
      loadingWait: false,
      waitTotal: 0,
      waitArray: [
        // { title: 'TJ1', moduleName: '施工图预算校核', userName: '超级管理A', createTime: '2023-10-19' },
        // { title: 'TJ2', moduleName: '施工图预算校核', userName: '超级管理A', createTime: '2023-10-19' }
      ],
      textTop: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      arr: [
        { date: '2020-1-8 00:00:00', className: 'mark1' },
        { date: '2020-1-13 00:00:00', className: 'mark1' }
      ],
      dateMemoArray: [],
      isEditDate: false,
      postDetailData: {
        show: false,
        type: 'build',
        typeName: '新增',
      },
      postDetailData1: {
        show: false,
        type: 'build',
        typeName: '新增',
      },
      postDetailData2: {
        show: false,
        type: 'build',
        typeName: '新增',
      },
      weatherStr: {
        temp: '',
        dayWeather: '',
        dayTemp: '',
        nightTemp: '',
      },
      city: ''
    }
  },
  created() {
    let day = new Date().Format("yyyy-MM-dd HH:mm")
    let day1 = day.split(' ')
    this.nowDay = day1[0]
    this.time = day1[1]
    this.getTime()

  },
  mounted() {
    this.getWaitDo();
    this.tianQi()
    setInterval(this.tianQi(), 60 * 1000 * 60);
  },
  methods: {
    tianQi() {
      var that = this
      AMap.plugin('AMap.CitySearch', function () {
        var citySearch = new AMap.CitySearch()
        citySearch.getLocalCity(function (status, result) {
          if (status === 'complete' && result.info === 'OK') {
            // 查询成功，result即为当前所在城市信息
            that.city = result.city
            AMap.plugin('AMap.Weather', function () {
              //创建天气查询实例
              var weather = new AMap.Weather();
              //执行实时天气信息查询
              weather.getLive(result.city, function (err, data) {
                that.weatherStr.dayWeather = data.weather
                that.weatherStr.temp = data.temperature + '°' //实时温度
              });
              weather.getForecast(result.city, function (err, data) {
                for (let i = 0; i < data.forecasts.length; i++) {
                  if (data.forecasts[i].date == that.nowDay) {
                    that.weatherStr.dayTemp = data.forecasts[i].dayTemp + '°'
                    that.weatherStr.nightTemp = data.forecasts[i].nightTemp + '°'
                    break;
                  }
                }
              });
            });
          }
        })
      })
    },
    onRoad(type) {
      console.log("type=", type)
      this.getWaitDo()
    },
    getWaitDo() {
      this.waitArray = [];
      this.waitTotal = 0;
      this.loadingWait = true;
      const userId = store.getters.user.id;
      todo.getList({ pageNo: 0, pageSize: 99, userId: userId }).then(({ code, data }) => {
        if (code === 200) {
          this.waitArray = data.content;
          this.waitTotal = data.content.length;
          this.loadingWait = false;
        } else {
          this.loadingWait = false;
          msgUtil.error2(data.message)
        }
      }).catch(() => {
        this.loadingWait = false;
        msgUtil.error2('获取待办事项失败!')
      })
    },
    getOkDo() {
      this.loadingWait = true;
      this.waitArray = [];
      const userId = store.getters.user.id;
      todo.getDoneList({ pageNo: 0, pageSize: 99, userId: userId }).then(({ code, data }) => {
        if (code === 200) {
          this.loadingWait = false;
          // this.waitArray = data.content;
          let list = []
          let length = data.content.length > 5 ? 5 : data.content.length
          for (let i = 0; i < length; i++) {
            list.push(data.content[i])
          }
          this.waitArray = list;
        } else {
          this.loadingWait = false;
          msgUtil.error2(data.message);
        }
      }).catch(() => {
        this.loadingWait = false;
        msgUtil.error2('获取已办事项失败!')
      });
    },
    getTime() {
      this.timeP = setInterval(() => {
        let day = new Date().Format("yyyy-MM-dd HH:mm")
        let day1 = day.split(' ')
        this.nowDay = day1[0]
        this.time = day1[1]
      }, 60000);
    },
    onTabChange(index) {
      this.activeIndex = index;
      if (index === 1) {
        this.getWaitDo();
      } else if (index === 2) {
        this.getOkDo();
      }
    },
    onSelect(url) {
      this.$router.push({ path: url })
    },
    clickDay(data) {
      this.clickDate = data
      // this.getClickDayData(data)
    },
    changeDate(data) {
      console.log(data) //左右点击切换月份
    },
    dbclickDay(data) {
      this.clickDate = data
      this.todoShow = true
      if (this.$refs['formBaseData'] !== undefined) {
        this.$refs['formBaseData'].resetFields();
      }
      this.todoForm = {
        time1: '',
        time2: '',
        content: '',
        title: '',
        type: '',
      }
    },
    /*编辑日历备忘录*/
    editMemo(val) {
      this.isEditDate = true
      this.todoShow = true
      /*  this.$nextTick(()=>{
            this.$refs['formBaseData'].resetFields();
        })*/
      this.todoForm.time1 = val.startTime.substring(11, 19)
      this.todoForm.time2 = val.endTimeStr ? val.endTimeStr + ':00' : val.endTime ? val.endTime.substring(11, 19) : ''
      this.todoForm.content = val.content
      this.todoForm.type = val.type
      this.todoForm.title = val.title
      this.todoForm.id = val.id
      this.clickDate = val.bindDate
      this.$forceUpdate()
    },
    getClickDayData(data) {
      let userId = store.getters.user.id
      let reg = new RegExp("/", "g");
      let postDate = data.toString().replace(reg, '-')
      let arr = postDate.split('-');
      let newArray = []
      newArray.push(arr[1], arr[2])
      let addPrefix = str => ('00' + str).slice(-2);
      let newList = newArray.map(addPrefix)
      //加了0  的月，日
      let yearArray = []
      yearArray.push(arr[0])
      yearArray.push(...newList);
      /*数组转字符串*/
      yearArray = yearArray.join("-")
      yearArray = yearArray + ' 00:00:00'
      this.$httpPost(
        '/buss-other/memorandum/listPage', {
        applyUser: userId,
        bindDate: yearArray
      }
      ).then(res => {
        this.dateMemoArray = []
        res.data.content.forEach(item => {
          item.ShortstartTime = item.startTime ? item.startTime.substring(11, 16) : ''
          item.ShortendTime = item.endTimeStr ? item.endTimeStr : item.endTime ? item.endTime.substring(11, 16) : ''
          item.ShortendDate = item.startTime ? item.startTime.substring(0, 10) : ''
          item.bindDate = item.bindDate ? item.bindDate.substring(0, 10) : ''
          this.$set(this.dateMemoArray, this.dateMemoArray.length, item)
        })
        console.log(this.dateMemoArray)
        console.log('123')
      }).catch(res => {
        this.$messageError(this.$route.name + '请求失败')
      })
    },
    //添加日历备忘录
    addWork() {
      //没点击日历，直接点击添加工作
      if (this.clickDate == null) {
        this.clickDate = this.todayDate
      }
      this.dbclickDay(this.clickDate)
    },
    doAudit(item) {
      let data = { type: '', typeName: '' }
      if (this.activeIndex == 1) {//待办
        data.type = 'approve'
        data.typeName = '审核'
      } else {//已办
        data.type = 'check'
        data.typeName = '查看'
      }
      if (item.moduleName == "监督检查") {
        this.postDetailData1 = {
          show: true,
          type: data.type,
          typeName: data.typeName,
          detailId: item.entityId
        }
      } else if (item.moduleName == '质量巡检') {
        this.postDetailData = {
          show: true,
          type: data.type,
          typeName: data.typeName,
          detailId: item.entityId
        }
      } else if (item.moduleName == '安全整改') {
        this.postDetailData2 = {
          show: true,
          type: data.type,
          typeName: data.typeName,
          detailId: item.entityId
        }
      }
    },
  },
  beforeDestroy() {
    this.timeP = undefined
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/function.scss";
@import "~@/assets/styles/homepage.scss";
.page100 {
  // overflow: hidden;
}
.leftPart {
  height: 100%;
}
.rightPart {
  width: 580px;
  height: 100%;
  margin-left: 24px;
}
.title {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #1c1e24;
  height: 100%;
  padding-right: 24px;
  box-sizing: border-box;
}
.commonUse {
  padding: 0 23px 25px;
  .card {
    width: calc((100% - 34px * 5) / 6);
    height: 159px;
    border-radius: 12px;
    margin-right: 34px;
    text-align: center;
    cursor: pointer;
    &:last-child {
      margin-right: 0;
    }
    .cardImg {
      width: 80%;
      height: auto;
      margin: 0 auto;
    }
    .text {
      font-size: 20px;
      color: #404040;
      font-weight: bold;
      margin-top: -30px;
    }
  }
}
.weather {
  width: 100%;
  height: 307px;
  background-image: url("~@/assets/images/homePage/gztbg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  justify-content: space-between;
  color: white;
  padding: 34px 26px 32px;
  box-sizing: border-box;
  margin-bottom: 24px;
  .f78 {
    font-size: 78px;
    line-height: 78px;
  }
  .box {
    display: inline-block;
    height: 78px;
    position: relative;
    .airtemp {
      font-size: 23px;
      position: absolute;
      right: 0;
      bottom: 3px;
    }
  }
  .text {
    font-size: 19px;
    line-height: 34px;
  }
  .time {
    font-size: 49px;
  }
  .addText {
    font-size: 16px;
    margin-left: 5px;
  }
}
.todo {
  ::v-deep .card_body {
    overflow: auto;
    padding-bottom: 1px;
  }
}
.todo_center_head {
  height: 100%;
  display: flex;
  .txt_tab {
    font-size: 16px;
    font-weight: 500;
    color: rgba(44, 44, 44, 0.36);
    margin-right: 57px;
    cursor: pointer;
    position: relative;
    margin-top: px_2_vh(18px);
    &.active {
      color: #2c2c22;
      border-bottom: 3px solid #1763ff;
    }
  }
}
.todo_center_content {
  // height: 100%;
  width: 100%;
  padding: 0 33px;
  box-sizing: border-box;
}
.todo_item {
  width: calc((100% - 20px) / 2);
  background: #f8f8f8;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  border: 2px solid transparent;
  box-sizing: border-box;
  padding: 14px 16px;
  margin-bottom: 20px;
  .name {
    font-size: 16px;
    color: #2e384d;
    font-family: Microsoft YaHei;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-right: 25px;
  }
  .model {
    font-size: 14px;
    color: #2e384d;
  }
  .name2 {
    font-size: 14px;
    color: #999999;
  }
  .mr31 {
    margin-right: 31px;
  }
  .mb19 {
    margin-bottom: 10px;
  }

  // .model2 {
  //   font-size: 12px;
  //   font-family: Microsoft YaHei;
  //   color: #9ba0a9;
  // }
  .el-icon-time {
    font-size: 14px;
    color: rgba(46, 56, 77, 0.46);
    margin-right: 6px;
  }
  .notice_top {
    max-width: 26vw;
  }
  .btn {
    width: 91px;
    font-size: 14px;
    color: white;
    border-radius: 7px;
    background-color: #2e5bff;
    padding: 8px 15px;
    text-align: center;
    box-sizing: border-box;
    &.green {
      background-color: rgba(33, 190, 39, 1);
    }
  }

  &:hover {
    border-color: #2e5bff;
    .name,
    .model {
      color: #2e5bff;
    }
    .name2,
    .model2,
    .el-icon-time {
      color: rgba(46, 91, 255, 0.47);
    }
  }
  .warnF {
    font-size: 16px;
    font-weight: normal;
    color: #3d3d3d;
    margin-bottom: 11px;
  }
}
.top {
  margin-bottom: 12px;
}
.empty_content {
  .emptyImg {
    display: block;
    width: 200px;
    height: auto;
    margin: 0 auto 10px;
  }
  .tipTitle {
    text-align: center;
  }
}
.calendarBox {
  padding: 0 25px;
  ::v-deep .wh_content {
    border: 1px solid #f2f2f2;
    border-bottom: none;
    padding: 5px 3%;
    &:last-child {
      border-bottom: 1px solid #f2f2f2;
    }
  }
  ::v-deep .wh_top_changge li {
    &:first-child {
      justify-content: flex-start;
      padding-left: 15px;
    }
    &:last-child {
      justify-content: flex-end;
      padding-right: 15px;
    }
  }
}
</style>
